<template>
  <div>
    <h1>home</h1>

    <!-- 1.跳转路由字符串写法 -->
    <!-- <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/music">音乐</router-link> -->

    <!-- 1.跳转路由对象写法 -->
    <!-- <router-link :to="{
      path: '/home/news'
    }">新闻</router-link>
    <router-link :to="{
      name: 'music'
    }">音乐</router-link> -->

    <!-- 2.动态params传参字符串写法 -->
    <router-link to="/home/music/1/2">华语</router-link>
    <router-link to="/home/music/2/3">粤语</router-link>
    <router-link to="/home/music/3/5">英语</router-link>
    <br />

    <!-- 2.动态params传参字符串写法 -->
    <!-- <router-link :to="{
      //path: '/home/music',   path不能和params一起使用
      name: 'music',
      params:{
        id: '1',
        time: '3'
      }
    }">华语</router-link>

    <router-link :to="{
      //path: '/home/music',
      name: 'music',
      params:{
        id: '2',
        time: '5'
      }
    }">粤语</router-link>

    <router-link :to="{
      //path: '/home/music',
      name: 'music',
      params:{
        id: '3',
        time: '2'
      }
    }">英语</router-link> -->

    <!-- 2.动态query传参字符串写法 -->
    <router-link to="/home/games?tit=qq飞车&verson=2018">游戏1</router-link>
    <router-link to="/home/games?tit=暴力摩托&verson=2001">游戏2</router-link>

    <!-- 2.动态query传参字符串写法 -->
    <!-- <router-link :to="{
    path: '/home/games',
    query: {
      tit: 'qq飞车',
      verson: '2018'
    }
  }">游戏1</router-link>

  <router-link :to="{
    name: 'games',
    query: {
      tit: '暴力摩托',
      verson: '2001'
    }
  }">游戏2</router-link> -->


  <!-- <button @click="goto">点击</button> -->

    <!-- 放二级路由 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",

  methods: {
    goto() {
      // console.log(this.$router.push("/home/games?tit=侠盗飞车&verson=2000"));
      // console.log(this.$router.replace("/home/games"));
      // console.log(this.$router.forward());
      // console.log(this.$router.back());
      // console.log(this.$router.go(-1));
    },
  },
};
</script>

<style>
</style>